<template>
    <div id="div1">


        <div id="toolbar-container" class="toolbar"></div>
        <p></p>
        <div id="text-container" :class="{'text':istext,'sort':issort}" v-model="editorData"></div>


    </div>
    </div>
</template>

<script>

    import wangEditor from 'wangeditor'

    export default {
        props: {

            // whether: String,   //在这里对传过来的进行接收
            // required: true
            editorheight: {
                type: Boolean,

            }
        },

        data() {
            return {
                istext: true,
                issort: false,
                editor: null,
                editorData: '',

            }
        },
        mounted() {
            const editor = new wangEditor('#toolbar-container', '#text-container') // 传入两个元素
            // 配置 onchange 回调函数，将数据同步到 vue 中
            editor.config.onchange = (newHtml) => {
                this.editorData = newHtml
            }
            editor.config.onfocus =(newHtml)=> {
                // this.ssss()
                this.issort = true
                this.istext = false
                // console.log('onfocus', newHtml) // 获取最新的 html 内容
            }
            editor.config.onblur = (editorheight) => {
                // this.ssss()
                this.issort = false
                this.istext = true
                console.log('onblur', "editorheight") // 获取最新的 html 内容
            }
            editor.create()
            this.editor = editor

        },

        beforeDestroy() {
            // 调用销毁 API 对当前编辑器实例进行销毁
            this.editor.destroy()
            // console.log("hhh")
            this.editor = null
        },
        methods: {
            // ssss() {

            //     this.issort = true
            //     this.istext = false
            //     console.log("dsdsds")
            // },


            clear() {

                this.editor.txt.clear()
            },
            //通过在父组件中设置子组件的ref，并在父组件里面调用子组件的方法，获取子组件里面的数据
            textData() {
                let data = this.editor.txt.html()
                // console.log(data)
                return data

            }



        },

    }

</script>

<style scoped>
    #div1 {
        display: inline-block;
        /* border: 1px solid #ccc; */
    }

    .toolbar {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    #toolbar-container /deep/ .w-e-toolbar>.w-e-menu {
        width: 30px;
        height: 30px;
    }

    .w-e-text-container /deep/ .w-e-text {
        /* max-height: 700px; */
    }

    p {
        height: 2px;
    }

    .text {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background-color: white;
        min-height: 2rem;

    }

    .sort {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background-color: white;
        min-height: 400px;
        max-height: 800px;

    }
</style>